
<template>
  <div class="batch_content">
    <div
      class="content-right"
      id="addbat"
      v-cloak
      style="margin:0 auto;border:0;width:980px;background: #fff;text-align:left;"
    >
      <div class="con-tp">
        <span class="stp_1" :class="{'yes':step==1}">基础设置</span>
        <span class="stp_2" :class="{'yes':step==2}">组件设置</span>
        <!-- <span class="stp_2" :class="{'yes':step==2}">高级设置</span> -->
      </div>
      <!-- 基础设置区域 -->
      <div class="con-list1" v-show="step==1">
        <div class="title">基础设置</div>
        <div class="stepitem">
          <div class="item_l with">
            <!-- 归属任务选择 -->
            <label>归属任务</label>
            <input
              type="text"
              name="taskinfoname"
              ref="taskinfoname"
              :class="{yes: hasTaskinfoname, err: !hasTaskinfoname}"
              :value="info.public.taskName"
              readonly
            />
            <div class="error" v-show="!hasTaskinfoname">请先选择归属任务</div>
            <!-- 归属任务选择列表 -->
            <transition name="fade">
              <div class="givefile" v-if="taskLayer" style="z-index:9999;">
                <em @click="close">关闭</em>
                <div class="clearfix mn-con">
                  <div class="mn-con-rt">
                    <div class="label clearfix">
                      <input type="text" v-model="searchTaskName" placeholder="请输入任务名称" />
                      <a v-on:click="searchTask">确认</a>
                    </div>
                    <div class="bom-sel">
                      <ul>
                        <li
                          v-for="item in taskList"
                          :class="{'select':info.public.taskId==item.taskid}"
                          v-on:click="selectTask(item.taskid,item.name,item.task_team_id)"
                          :title="item.name"
                          :key="item.taskid"
                        >{{item.name}}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <!-- 批次名称设置 -->
          <div class="item_r">
            <label>批次名称</label>
            <input
              type="text"
              ref="inputTask"
              v-on:focus="monitor('hasBatchName')"
              :class="{yes: hasBatchName, err: !hasBatchName}"
              name="batchname"
              v-model="info.public.batchName"
              placeholder="请输入批次名称"
              :disabled="info.public.edit"
            />
            <div class="error" v-show="!hasBatchName">{{batchNameMsg}}</div>
          </div>
        </div>
        <!-- 标注规范设置 -->
        <div class="stepitem">
          <label>标注规范</label>
          <quill-editor
            v-model="info.public.rule"
            ref="myQuillEditor"
            :options="editorOption"
            @focus="monitor('hasMarkStandard')"
            @change="EditChange($event)"
          ></quill-editor>
          <div class="error" v-show="!hasMarkStandard">标注规范需在1~3000字符</div>
          <!-- <textarea class="area" 
          id="editor" name="batchrule" v-on:focus="monitor($event)" placeholder="请输入规范" 
          v-model="info.public.rule" style="display: inline-block;width:760px;height: 120px;"></textarea>-->
        </div>
        <!-- 批次优先级设置 -->
        <div class="radioitem" style="margin-top:75px">
          <label>批次优先级</label>
          <ul class="radio">
            <li @click="levelChange(3)" :class="{'selected':info.public.level==3}">低</li>
            <li @click="levelChange(2)" :class="{'selected':info.public.level==2}">中</li>
            <li @click="levelChange(1)" :class="{'selected':info.public.level==1}">高</li>
            <li @click="levelChange(0)" :class="{'selected':info.public.level==0}">绝对优先</li>
          </ul>
        </div>
        <!-- 批次执行状态 -->
        <div class="radioitem">
          <label>批次状态</label>
          <ul class="radio">
            <li @click="executeChange(0)" :class="{'selected':info.public.paused==0}">立即执行</li>
            <li @click="executeChange(1)" :class="{'selected':info.public.paused==1}">暂不执行</li>
          </ul>
        </div>
        <div v-if="flag">
          <div id="baseSetting">
            <base-setting ref="base" :batchInfo="batchInfo"></base-setting>
          </div>
        </div>
        <div class="btngroup">
          <a v-on:click="nextstep">下一步</a>
        </div>
      </div>
      <!--高级设置区域-->
      <div class="con-list2" v-show="step==2">
        <div v-if="flag">
          <div id="specSetting">
            <!-- <spec-setting ref="spec" :editSpecData="editSpecData"></spec-setting> -->
            <div class="title">组件设置</div>
            <CustomSetting :components="componentsInfo" ref="custom" />
          </div>
        </div>
        <div class="btngroup">
          <a v-on:click="nextstep">上一步</a>
          <a class="btnd" v-on:click="submitBtn(0)">提交</a>
          <a
            class="btnd"
            v-on:click="submitBtn(1)"
            v-if="statusType != 4 && statusType != 5 && statusType != 6"
            v-show="flowtask == null || flowtask == undefined"
          >保存</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/js/ass_plugin/ueditor/ueditor.config.js";
import "@/assets/js/ass_plugin/ueditor/ueditor.all.js";
import "@/assets/js/ass_plugin/ueditor/lang/zh-cn/zh-cn";
import "@/assets/js/ass_plugin/ueditor/ueditor.parse.js";
import BaseSetting from "@/components/create-batch/BaseSetting";
// import SpecSetting from "@/components/create-batch/SpecSetting";
import CustomSetting from "@//components/create-batch/CustomSetting";
import { constants } from 'fs';
// import { constants } from 'fs';
export default {
  name: "CreateBatch",
  data() {
    return {
      // editBaseData: null, // base组件数据
      // editSpecData: null, // spec组件数据
      componentsInfo: [], // 组件信息
      batchInfo: {}, // 批次数据
      repulse: "", // 打回 url带的参数
      jurisdiction: "", // 管辖范围 应该是给后端
      task_team_id: "", // 归属任务的id
      role: "", // 团队id ==》teamid
      groupId: "",
      flowtask: "",
      batchId: "",
      edit: "",
      statusType: "", // url带过来的标识 是否可以保存或提交
      // 不知道干什么
      postData: {
        status: "4;5;6", //查询状态
        batchName: "", //批次名称
        taskName: "", //任务名称
        queryType: "page", //分页标识
        delFlag: ""
      },
      pageSize: 1,
      batchList: null,
      searchTaskName: "", //搜索任务列表
      taskLayer: false, //任务列表弹层
      taskList: [], //任务列表盒子
      step: 1, //基础、高级
      priority: 2, //记住当前批次的优先级
      flag: false,
      // 创建批次保存的数据
      info: {
        public: {
          pickBatchId: "", // 从url中获取
          pickTaskId: "", // 从url中获取
          batchId: "", //
          edit: false,
          taskName: "", //归属任务名称
          taskId: "", //归属任务id
          batchName: "",
          rule: "",
          level: 2,
          paused: 0
        },
        custom: {},
        components: {}
      },
      // 富文本编辑框配置项
      editorOption: {
        placeholder: "请输入规范",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "image"] // toggled buttons
          ]
        }
      },
      hasTaskinfoname: true, // 是否选择所属任务名
      hasBatchName: true, // 是否存在批次名称
      batchNameMsg: "", // 批次错误提示语
      hasMarkStandard: true // 标注规范是否规范
    };
  },
  async created() {
    // 获取url参数
    let urlArgs = this.Utils.getQueryStringArgs();
    //判断是否是流转任务,如果是，需要传上一个任务的batchid和taskid
    this.info.public.pickBatchId = urlArgs["batchId"];
    this.info.public.pickTaskId = urlArgs["bb"];
    this.info.public.taskId = urlArgs["taskId"];
    this.statusType = urlArgs["status"];
    this.batchId = urlArgs["batchId"];
    this.flowtask = urlArgs["flowtask"];
    this.groupId = urlArgs["groupId"];
    this.repulse = urlArgs["repulse"];

    let batchId = this.batchId;
    this.ass_api.getCreateTaskInfo({
      taskId: this.info.public.taskId
    }).then(data=>{
      if(!data) return;
      console.log(data, 'datatdatatdatatdatatdatatdatatdatatdatatdatatdatatdatatdatatdatatdatatdatatdatat')
    })
    if (!!batchId) {
      batchId = batchId.substring(0, batchId.indexOf("&"));
      // let batchSaveInfo = await self.getBatchInfo(id, undefined, 'init') // 初始化获取批次数据
    }

    if (this.info.public.taskId != null) {
      this.ass_api
        .BatchTaskNameS({ taskid: this.info.public.taskId })
        .then(data => {
          if (!data) return;
          this.selectTask(this.info.public.taskId, data.name);
        });
    }

    // 批次数据
    let LastBatchInfo =
      '{"public":{"batchId":"","edit":false,"taskName":"文本翻译升级测试","taskId":"86F0AC3152F9452EB628B366530DCC41","batchName":"123","rule":"<p>是否擦粉撒旦</p>","level":"2","paused":0,"type":1},"custom":{"markEnvironmentSet":{"checkStatus":true,"checkType":2,"checkVal":"31","testStatus":true,"testType":2,"testVal":"78"},"integralSet":{"score":{"mark":{"coe":"1","formula":"1*总条数*正确率","total":true,"correct":true,"wordNum":false,"max":10,"min":1},"check":{"coe":"2","formula":"2*总条数","total":true,"correct":false,"min":1,"max":10}},"markTransfinite":false,"checkTransfinite":false,"textareaValue":"","exchangeStatus":true,"exchangeVal":"1123"},"cloudDiskImport":{"importType":0,"myrid":"BADB887D9B97418A88AD8EEE20753D81837C4D9C92214129AF2BCCC682D9161F","selectFileRid":"","selectFileName":"维翻中10条数据"},"termImport":{"isTerm":true,"selectTermName":"1万","termRid":"E9B2D8D449BA41B5A8B14F41BC2B3A727C551AA4C570443FA592DBE19E496931","selectFileRid":"","selectFileName":""},"languageType":{"languageType":"CN-EN"},"machineTranslation":{"isMachineTrans":true}},"components":{"1577675938951":{"name":"对比文本","config":{"placeholder":"占位符1是的发送到水电费是否","disabled":true,"content":"华角度看 好的卡好"},"style":{"marginLeft":"10px","marginRight":"10px","marginTop":"0px","marginBottom":"2px","backgroundColor":"#192CA2","fontWeight":"bold","fontStyle":"italic","textDecoration":"none","textAlign":"center","borderWidth":"10px","borderColor":"#F02DD6","borderStyle":"dashed","lineHeight":"30px","paddingLeft":"3px","paddingRight":"0px","paddingTop":"1px","paddingBottom":"0px"}},"1577675938952":{"name":"对比文本","config":{"placeholder":"请输入是的发送到胜多负少水电费","disabled":true,"maxlength":null,"height":"32px"},"style":{"marginLeft":"1230px","marginRight":"0px","marginTop":"0px","marginBottom":"0px"}}}}';
    let LastBatchInfoJSON = JSON.parse(LastBatchInfo);
    this.batchInfo = LastBatchInfoJSON.custom;

    // 初始化自定义标注组件对外配置
    this.initCustomMarkCom(LastBatchInfoJSON);
  },
  components: {
    "base-setting": BaseSetting, // 基础批次组件
    // 'spec-setting': SpecSetting, // 高级批次组件
    CustomSetting
  },
  methods: {
    // 初始化创建批次拖拽组件配置项
    initCustomMarkCom(LastBatchInfo) {
      // 组件数据
      let mokeData = `[{"id":1577675938951,"name":"textItem","value":"","style":{"fontFamily":"Microsoft Yahei","fontSize":"14px","color":"#F50E0E","backgroundColor":"#192CA2","fontWeight":"bold","fontStyle":"italic","textDecoration":"none","textAlign":"center","borderWidth":"10px","borderColor":"#F02DD6","borderStyle":"dashed","lineHeight":"30px","marginLeft":"10px","marginRight":"10px","marginTop":"0px","marginBottom":"2px","paddingLeft":"3px","paddingRight":"0px","paddingTop":"1px","paddingBottom":"0px"},"config":{"content":"华角度看 好的卡好","fixWidth":false,"fixHeight":false},"valid":{},"databinding":"","location":{"x":2,"y":1,"w":12,"h":1,"i":0,"moved":false},"event":{},"componentType":0,"outerConfig":{"name":"对比文本","config":{"placeholder":"请输入","disabled":false,"content":"AInote 运营管理系统"},"style":{"marginLeft":"","marginRight":"","marginTop":"","marginBottom":"","backgroundColor":"#ffffff","fontWeight":"normal","fontStyle":"normal","textDecoration":"none","textAlign":"left","borderWidth":0,"borderColor":"","borderStyle":"solid","lineHeight":"30px","marginLeft":"0px","marginRight":"0px","marginTop":"0px","marginBottom":"0px","paddingLeft":"0px","paddingRight":"0px","paddingTop":"0px","paddingBottom":"0px"}}},{"id":1577675938952,"name":"inputItem","value":"","style":{"marginLeft":"0px","marginRight":"0px","marginTop":"0px","marginBottom":"0px"},"config":{"labelName":"输入框：","labelWidth":"60px","type":"text","rows":2,"size":"default","placeholder":"请输入","disabled":false,"maxlength":null,"height":"32px"},"valid":{},"databinding":"","location":{"x":2,"y":1,"w":12,"h":1,"i":0,"moved":false},"event":{},"componentType":0,"outerConfig":{"name":"对比文本","config":{"placeholder":"请输入","disabled":false,"maxlength":null,"height":"32px"},"style":{"marginLeft":"","marginRight":"","marginTop":"","marginBottom":""}}}]`;
      // 继承 或者 批次前保存数据
      let customData = JSON.parse(mokeData);
      this.componentsInfo = customData;

      // 存在保存的组件数据 保存组件数据优先
      if (LastBatchInfo.components) {
        let { components } = LastBatchInfo;

        this.componentsInfo.forEach(item => {
          console.log(
            components[item.id],
            "components[item.id]",
            components[item.id]
          );
          if (!!components[item.id]) {
            item.outerConfig = components[item.id];
          }
        });
      } else {
        // 不存在批次保存的组件数据时， 默认展示拖拽的数据
        this.componentsInfo.forEach(cInfo => {
          let { config, style, outerConfig } = cInfo;
          let batchConfig = outerConfig.config;
          let batchStyle = outerConfig.style;
          // 继承拖拽config值
          Object.keys(batchConfig).forEach(key => {
            if (config[key] !== undefined) {
              batchConfig[key] = config[key];
            }
          });
          // 继承拖拽style值
          Object.keys(batchStyle).forEach(key => {
            if (style[key] !== undefined) {
              batchStyle[key] = style[key];
            }
          });
        });
      }
    },
    nextstep: function() {
      var self = this;
      // 对富文本框内容进行过滤
      let htmlVal = self.info.public.rule; //获取富文本编辑框的HTML
      let reg = /<[^<>]+>/g;
      let htmlValtext = htmlVal.replace(/<!--[\w\W\r\n]*?-->/gim, ""); //获取富文本编辑框的text
      htmlValtext = htmlValtext.replace(reg, "");
      htmlValtext = htmlValtext.replace(/&nbsp;/g, "").replace("/\n/g", "");
      // self.info.public.rule = htmlVal; // 这段是干哈的阿 来回赋值自己
      self.info.public.rule = htmlValtext; // 这段是干哈的阿 来回赋值自己
      //
      let reg2 = /^[A-Za-z0-9\-\u4e00-\u9fa5]+$/;
      if (self.info.public.taskName == "") {
        // 归属任务名校验
        this.hasTaskinfoname = false;
        return false;
      } else if (self.info.public.batchName == "") {
        // 批次名称校验
        this.hasBatchName = false;
        this.batchNameMsg = "请输入批次名称";
        return false;
      } else if (self.info.public.batchName.length > 40) {
        // 批次名长度校验
        this.hasBatchName = false;
        this.batchNameMsg = "批次名称不能超过40个字符";
        return false;
      } else if (!reg2.test(self.info.public.batchName)) {
        // 批次名内容校验
        this.hasBatchName = false;
        this.batchNameMsg = "批次名称支持中英文数字和-";
        return false;
      } else if (
        // 标注规范校验
        htmlValtext == 0 ||
        htmlValtext.length > 3000 ||
        htmlValtext.length < 1
      ) {
        this.hasMarkStandard = false;
        return false;
      }
      // 校验通过
      self.step == 1 ? (self.step = 2) : (self.step = 1);
      // 关闭错误提示标识
      this.hasMarkStandard = true;
      this.hasTaskinfoname = true;
      this.hasBatchName = true;
    },
    // 批次优先级 3 低 2 中 1 高  0绝对优先
    levelChange: function(n) {
      if (this.info.public.taskId != "") {
        if (this.priority == n) {
          this.info.public.level = n;
        } else {
          this.ass_api
            .batchPriority({
              taskId: this.info.public.taskId,
              priority: n,
              batchId: this.info.public.batchId
            })
            .then(data => {
              if (!data) return;
              this.info.public.level = n;
            });
        }
      } else {
        this.ui.fade("请先选择归属任务");
      }
    },
    // 批次状态 立即执行，暂不执行
    executeChange(n) {
      if (this.info.public.taskId != "") {
        this.info.public.paused = n;
      } else {
        this.$message("请先选择归属任务");
      }
    },
    // 聚焦时关闭对应错误提示
    monitor: function(name) {
      this[name] = true;
    },
    // 标注规范 富文本内容change事件
    EditChange($event) {
      console.log(this.info.public.rule, $event);
    },
    // 通过任务名搜索归属任务
    searchTask: function() {
      this._getTaskList(this.searchTaskName);
    },
    _getTaskList: function(type) {
      this.flag = false;
      let params = {
        qtype: "adminTask"
      };
      if (type != "" && type != null && type != undefined) {
        params.name = type;
      }

      this.ass_api.batchAttributionTask(params).then(data => {
        if (!data) return;
        this.taskList = data;
      });
    },
    // 归属任务查询接口
    _getTaskBatch(id, name, teamid) {
      // console.log(this.groupId)
      var self = this;
      var mydata = {};
      mydata.status = self.postData.status;
      mydata.batchName = self.postData.batchName;
      mydata.queryType = self.postData.queryType;
      mydata.dealType = "default";
      self.ass_api
        .batchInfo({
          taskId: id,
          currPage: 1, // 分页参数
          pageSize: self.pageSize, // 分页参数
          ...mydata
        })
        .then(data => {
          if (!data) return;
          self.batchList = data.list;
          if (JSON.stringify(data.list) != "[]") {
            self.getBatchInfo(self.batchList[0].batchId, teamid);
          } else {
            if (teamid) {
              // 为空不赋值
              self.groupId = teamid;
              self.info.public.batchName = "";
              self.info.public.level = 2;
              self.info.public.paused = 0;
              if (self.info.public.rule) {
                // self.ue.setContent((self.info.public.rule = ""));
                self.info.public.rule = "";
              }
            } else {
              self.groupId = self.GetQueryString("groupId");
              self.info.public.batchName = "";
              self.info.public.level = 2;
              self.info.public.paused = 0;
              if (self.info.public.rule) {
                // self.ue.setContent((self.info.public.rule = ""));
                self.info.public.rule = "";
              }
            }
          }
          self.role = teamid;
        });
    },
    // 批次数据获取接口
    /**
     * @param id 查询参数 batchid
     * @param teamid  查询参数 teamid
     * @param souce  调用方法的开源 初始化还是选择任务
     */
    async getBatchInfo(id, teamid, souce) {
      var self = this;
      if (id != "") {
        let data = await self.ass_api.batchInfo({ batchId: id });
        if (!data) return;
        let batchData = data[0]; // 批次id
        self.info.public.taskName = batchData.taskName;
        self.info.public.taskId = batchData.taskId;
        self.info.public.batchName = batchData.batchName;
        self.info.public.rule = batchData.markStandard;
        self.info.public.level = batchData.priority;
        if (batchData.paused == null || batchData.paused == undefined) {
          self.info.public.paused = 0;
        } else {
          self.info.public.paused = batchData.paused;
        }
        self.priority = batchData.priority;
        if (batchData.extend.custom.base.recycleTime) {
          delete batchData.extend.custom.base.recycleTime;
        }
        // self.$set(this, "editBaseData", batchData.extend.custom.base); // 添加base组件数据
        // self.$set(this, "editSpecData", batchData.extend.custom.spec); // 添加spec组件数据
        // 对于初始化调用 或是 选择任务调用 处理不一样的逻辑
        if (souce == "init") {
          self.info.public.edit = true;
          self.info.public.batchId = batchData.batchId; // 批次id      info
          self.batchId = batchData.batchId; // 批次id
        } else {
          self.info.public.edit = false;
          batchData.extend.custom.base.myrid = "";
          if (teamid) {
            self.groupId = teamid;
            self.jurisdiction = teamid;
            self.info.public.batchName = "";
          } else {
            self.groupId = self.GetQueryString("groupId");
            self.jurisdiction = self.groupId;
            self.info.public.batchName = "";
          }
        }
        self.flag = true;
        // self.$set(this, "componentsInfo", batchData.extend.components); // 添加base组件数据
        // self.$set(this, "batchInfo", batchData.extend.custom); // 添加spec组件数据
        this.batchInfo = batchData.extend.custom;
        return batchData.extend;
      }
      return false;
    },
    // 选择归属任务
    selectTask: function(id, name, teamid) {
      var self = this;
      self.info.public.taskId = id;
      self.info.public.taskName = name;
      self.taskLayer = false;
      if (!self.info.public.edit) {
        if (!teamid) {
          //流转任务不带入批次信息
          if (this.flowtask) {
            console.log("这里调用的是批次组件");
          } else {
            this._getTaskBatch(id, name, teamid);
          }
        } else {
          this._getTaskBatch(id, name, teamid);
        }
      }
      self.flag = true;
    },
    // 关闭归属任务搜索
    close: function() {
      var self = this;
      self.taskLayer = false;
      if (self.info.public.taskId != "") {
        self.selectTask(self.info.public.taskId, self.info.public.taskName);
      }
    },
    GetQueryString: function(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    submitBtn: function(n) {
      var self = this;
      //删除目录树
      // this.$refs.base.fileList = []; // 这个注释掉 在子组件中做
      // if (this.$refs.spec.textareaStatus == 2) {
      //   this.$refs.spec.textareaStatus = 1; // 积分超限
      // }
      // 第一步校验所有批次组件

      // 第二步 获取所有组件数据
      // 第三步提交

      // info: {
      //   custom: {
      //     base: {},
      //     spec: {}
      //   }
      // }
      // this.info.custom.base = this.$refs.base.$data;
      // this.info.custom.spec = this.$refs.spec.$data;

      if (
        (this.statusType == null || this.statusType == undefined) &&
        this.batchId == null
      ) {
        self.info.public.batchId = "";
      }
      self.info.public["type"] = n; // n  0 提交, 1保存
      if (self.myvalidate()) {
        // 校验规则 通过后
        // 处理需提交的数据
        this.setSubmitData();
        console.log(JSON.stringify(this.info));

        self.ass_api
          .createBatch(
            this.info,
            `?taskId=${self.info.public.taskId}&groupId=${this.groupId}`
          )
          .then(data => {
            if (!data) return;
            if (n == 0) {
              self.ui.successGoBase("提交成功", "/manager/index/batch");
            } else {
              self.ui.successGoBase("保存成功", "/manager/index/batch");
            }
          });
      }
    },
    // 设置保存提交数据
    setSubmitData() {
      let Base = this.$refs.base;
      let componentRefs = Base.$refs;
      // 批次数据
      for (let key in componentRefs) {
        this.info.custom[key] = componentRefs[key].getComponentVal();
      }
      // 组件数据
      // this.componentsInfo.forEach(item => {
      //   this.info.components[item.id] = item.outerConfig
      // })
      this.info.components = this.$refs.custom.getComponentVal(); // 获取组件配置数据
    },
    //校验的规则
    myvalidate: function() {
      let Base = this.$refs.base;
      let componentRefs = Base.$refs;
      for (let key in componentRefs) {
        let validate = componentRefs[key].validate;
        if (validate && !validate()) {
          // 执行组件内部的校验函数 返回false标识校验不通过
          return false;
        }
      }
      return true;
    }
  },
  mounted() {
    var self = this;
    // this.ue = window.UE.getEditor("editor", {
    //     autoHeightEnabled: false, //设置不自动调整高度
    //     elementPathEnabled: false,
    //     wordCount: false
    // });
  }
};
</script>
<style>
.btngroup {
  text-align: center;
  font-size: 0;
  padding-top: 80px;
}
.btngroup a {
  display: inline-block;
  font-size: 14px;
  width: 120px;
  margin-right: 10px;
  color: #fff;
  border: 1px solid #fcad1d;
  background-color: #fcad1d;
  height: 34px;
  text-align: center;
  line-height: 34px;
}
.btngroup a:hover {
  border: 1px solid #e07900;
  background: #e07900;
}
.btngroup a.last {
  height: 34px;
  text-align: center;
  line-height: 34px;
  color: #333;
  color: #333;
  border: 1px solid #ececec;
  background: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
}
.btngroup a.last:hover {
  background: #f9f9f9;
}
</style>

<style>
div.error {
  display: inline;
  margin-left: 100px;
  color: #fbae22;
  line-height: 20px;
  padding: 2px;
  white-space: nowrap;
  width: auto;
  z-index: 99;
  font-size: 12px;
  animation: myfirst 1s;
  -moz-animation: myfirst 1s;
  -webkit-animation: myfirst 1s;
  -o-animation: myfirst 1s;
}
.quill-editor .ql-container {
  height: 100px;
}
</style>

<style lang="less" scoped>
// @import "~@/assets/css/common/create-batch.css"
.content-right {
  width: 1000px;
  border-left: 20px solid #f2f3f4;
  margin-left: 200px;
  padding: 20px;
  min-height: 800px;
  .title {
    color: #5e6a68;
    font-size: 16px;
    font-weight: 700;
    line-height: 48px;
    display: block;
    position: relative;
    padding-left: 14px;
    margin-top: 10px;
  }
  .title:before {
    position: absolute;
    left: 0;
    top: 17px;
    width: 4px;
    height: 15px;
    display: block;
    background: #07d569;
    content: "";
  }
  .title p {
    padding: 5px 23px;
    display: inline;
    font-size: 12px;
    font-weight: normal;
    color: #e07900;
  }
}
.con-tp {
  height: 34px;
  width: 760px;
  margin: 0 0 0 100px;
  font-size: 0;
  span {
    width: 380px;
    height: 34px;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    color: #14cd6b;
    line-height: 34px;
    background: url("~@/assets/images/common/work-team/addbat.png") no-repeat 0
      0;
  }
  span.stp_1 {
    color: #78d3a2;
    background-position: 0 -34px;
  }
  span.stp_1.yes {
    color: #78d3a2;
    background-position: 0 0;
  }
  span.stp_2 {
    color: #78d3a2;
    background-position: -390px 0;
  }
  span.stp_2.yes {
    color: #78d3a2;
    background-position: -390px -34px;
  }
}
.stepitem {
  position: relative;
  margin-bottom: 15px;
  &:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
  }
  label {
    width: 100px;
    padding-right: 10px;
    text-align: right;
    float: left;
    line-height: 34px;
    color: #666;
  }
  .item_l {
    display: inline-block;
    font-size: 14px;
    position: relative;
    width: 416px;
    float: left;
  }
  .with {
    position: relative;
  }
  textarea.area {
    font-size: 14px;
    border: 1px solid #e0e0e0;
    resize: none;
    border-radius: 2px;
    width: 760px;
    padding: 10px;
    height: 80px;
  }
  textarea.area.err {
    animation: errborder 1s;
    -moz-animation: errborder 1s;
    -webkit-animation: errborder 1s;
    -o-animation: errborder 1s;
    border-color: #fbae22;
    color: #fbae22;
  }
  textarea.area.yes {
    animation: myborder 1s;
    -moz-animation: myborder 1s;
    -webkit-animation: myborder 1s;
    -o-animation: myborder 1s;
    border-color: #e0e0e0;
    color: #333;
  }
  .item_l i {
    display: block;
    width: 50px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-style: normal;
    font-size: 14px;
    color: #fff;
    background: #14cb6b;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    -ms-border-radius: 0 2px 2px 0;
    -o-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    cursor: pointer;
  }
  input.yes {
    animation: myborder 1s;
    -moz-animation: myborder 1s;
    -webkit-animation: myborder 1s;
    -o-animation: myborder 1s;
    border-color: #e0e0e0;
    color: #333;
  }
  .item_r input {
    width: 322px;
  }
  .item_r {
    display: inline-block;
    width: 422px;
    float: right;
  }
  input {
    width: 267px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    line-height: 32px;
    display: inline-block;
    font-size: 14px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    height: 34px;
  }
  input.err {
    animation: errborder 1s;
    -moz-animation: errborder 1s;
    -webkit-animation: errborder 1s;
    -o-animation: errborder 1s;
    border-color: #fbae22;
    color: #fbae22;
  }
}
.givefile {
  position: absolute;
  top: 38px;
  left: 100px;
  background: #fff;
  width: 266px;
  z-index: 99;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  -ms-border-radius: 0 2px 2px 0;
  -o-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  -webkit-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
  -moz-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
  -ms-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
  -o-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
  box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
  p.size {
    text-align: center;
    margin: 20px 0 10px 0;
    height: 14px;
    line-height: 14px;
    color: #999;
  }
  .mn-con {
    margin: 13px;
  }
  .mn-con .mn-con-rt .label {
    position: relative;
    width: 100%;
    padding: 0;
  }
  .mn-con .mn-con-rt .label input {
    width: 191px;
    border: 1px solid #ececec;
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
    float: left;
    border-radius: 2px;
  }
  .mn-con .mn-con-rt .label a {
    width: 50px;
    height: 32px;
    line-height: 32px;
    background: #14cb6b;
    float: left;
    color: #fff;
    position: relative;
    margin-left: -1px;
    text-align: center;
  }
  .mn-con .mn-con-rt .label a i {
    background: url("~@/assets/images/common/lot-manage/person.png") no-repeat 0
      0;
    height: 14px;
    width: 14px;
    display: inline-block;
    position: absolute;
    top: 11px;
    left: 10px;
  }
  .mn-con-lf {
    float: left;
    padding-top: 5px;
  }
  em {
    width: 15px;
    height: 15px;
    cursor: pointer;
    display: block;
    background: #e07900 url("~@/assets/images/common/close2.png") no-repeat 0 0;
    text-indent: -99em;
    overflow: hidden;
    position: absolute;
    right: -15px;
    top: 0;
    color: #666;
    transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
  }
  em:hover {
    background: #d95d5d url("~@/assets/images/common/close2.png") no-repeat 0 0;
    color: #fff;
    transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
  }
  .bom-sel {
    border: 1px solid #ececec;
    height: 240px;
    margin-top: 10px;
  }
  .ip-nm {
    padding: 10px 10px 0 10px;
    position: relative;
  }
  .ip-nm input {
    border: 1px solid #ececec;
    border-radius: 2px;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    width: 100%;
  }
  .ip-nm a {
    position: absolute;
    background: url("~@/assets/images/common/lot-manage/gray_del.png") no-repeat
      0 0;
    height: 14px;
    width: 14px;
    right: 20px;
    top: 20px;
  }
  .btn-list {
    margin: 30px auto;
    width: 190px;
    overflow: hidden;
  }
  .bom-sel ul {
    height: 238px;
    overflow-y: auto;
  }
  .bom-sel ul li {
    padding-left: 20px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bom-sel ul li:not(:last-child) {
    border-bottom: 1px solid #ececec;
  }
  .bom-sel ul li.select {
    background: #f3f3f3;
    color: #14cb6b;
  }
}
.radioitem {
  height: 34px;
  line-height: 14px;
  margin: 15px 0 15px 0;
  .radio {
    height: 14px;
    line-height: 14px;
    float: left;
    margin-top: 10px;
    width: auto;
    margin-left: 0;
    li {
      margin-right: 40px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      padding-left: 22px;
      display: inline-block;
      background: url("~@/assets/images/common/radio.png") no-repeat -119px 0;
      float: left;
      width: auto;
    }
    li.selected {
      background-position: 0 0;
    }
    li.selected[type="cursor"] {
      cursor: default;
    }
  }
  label {
    width: 100px;
    padding-right: 10px;
    text-align: right;
    float: left;
    line-height: 34px;
    color: #666;
  }
}

.quill-editor {
  width: 760px;
  float: left;
}
</style>
